'use client'

import { useState } from 'react'
import OutlineButton from '@/components/common/OutlineButton'
import GradientButton from '@/components/common/GradientButton'

export default function Profile() {
  const [name, setName] = useState('')
  const [title, setTitle] = useState('')
  const [company, setCompany] = useState('')
  const [website, setWebsite] = useState('https://example.com')

  const handleSave = () => {
    console.log({ name, title, company, website })
  }

  return (
    <div className="upload-card w-full p-[16px]">
      {/* Header */}
      <h2 className="text-lg font-semibold mb-6 text-white">Profile</h2>

      {/* Form */}
      <form className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Full name */}
        <div>
          <label className="block text-sm text-gray-400 mb-1">Full name</label>
          <input
            type="text"
            placeholder="Your name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full bg-transparent border-solid  border-[#1f2533] rounded-lg px-4 py-2.5 text-gray-200 placeholder-gray-500 focus:border-[#3b82f6] outline-none transition"
          />
        </div>

        {/* Title */}
        <div>
          <label className="block text-sm text-gray-400 mb-1">Title</label>
          <select
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 text-gray-200 placeholder-gray-500 focus:border-[#3b82f6] outline-none transition">
            <option value="">Select a title</option>
            <option value="Analyst">Analyst</option>
            <option value="Associate">Associate</option>
            <option value="Partner">Partner</option>
            <option value="Director">Director</option>
            <option value="Founder">Founder</option>
          </select>
        </div>

        {/* Company */}
        <div>
          <label className="block text-sm text-gray-400 mb-1">Company</label>
          <input
            type="text"
            placeholder="Firm / Company name"
            value={company}
            onChange={(e) => setCompany(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 text-gray-200 placeholder-gray-500 focus:border-[#3b82f6] outline-none transition"
          />
        </div>

        {/* Company website */}
        <div>
          <label className="block text-sm text-gray-400 mb-1">Company website</label>
          <input
            type="url"
            placeholder="https://example.com"
            value={website}
            onChange={(e) => setWebsite(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 text-gray-200 placeholder-gray-500 focus:border-[#3b82f6] outline-none transition"
          />
        </div>
      </form>

      {/* Buttons */}
      <div className="flex justify-end gap-4 mt-8">
        <OutlineButton title="Cancel" fontSize="13px" width="80px" height="36px" radius="12px" onClick={() => {}} />
        <GradientButton title="Save" fontSize="13px" width="80px" height="36px" radius="12px" onClick={() => {}} />
      </div>
    </div>
  )
}
